@extends('layouts.app')
@section('headscript')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.jqueryui.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.jqueryui.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.5/css/responsive.dataTables.min.css" />
    <style>
		h1 {
		    font-size: 20px;
		    font-weight: 600;
		    border-bottom: 1px solid #eaeaea;
		    padding-bottom: 10px;
		    position: relative;
		    margin-top: 50px;
		    margin-bottom: 30px;
		}
		h1:before {
		    content: "";
		    position: absolute;
		    left: 0px;
		    bottom: -1px;
		    width: 100px;
		    height: 2px;
		    background: #000;
		}
		table.table thead th {
		    font-size: 14px;
		}
		table.table tbody td {
		    font-size: 14px;
		}
		table.table tbody td iframe {
		    width: 250px;
		    height: 100px;
		}
		.container {
		    max-width: 98%;
		    width: 100%;
		}

		table.table {
		    margin-top: 30px !important;
		    margin-bottom: 100px !important;
		}
		.dt-buttons.ui-buttonset button {
		    color: #fff;
		    background-color: #007bff;
		    border-color: #007bff;
		    font-size: 14px;
		    margin-right: 2px;
		    border-radius: 4px;
		}

		.ui-widget-header {
		    background: transparent;
		    border: unset;
		}
	</style>
@endsection
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Site User Button Click Records:</h1>
            <div class="counter">
                <div class="button">
                    {{$countShow}}
                    <label>Site Button</label>
                </div>
                <div class="button">
                    {{$countShow2}}
                    <label>Float Button</label>
                </div>
            </div>
            <div id="example_filter">
            </div>
            <table id="example" class="table">
              <thead class="thead-dark">
                <tr> 
                  <th scope="col">#</th>
                  <th scope="col">Referrer Page</th>
                  <th scope="col">Visit Page</th>
                  <th scope="col">Broswer Detail</th>
                  <th scope="col">Screen Resolution</th>
                  <th scope="col">Status</th>
                  <th scope="col">Country</th>
                  <th scope="col">Country Code</th>
                  <th scope="col">Region</th>
                  <th scope="col">Region Name</th>
                  <th scope="col">City</th>
                  <th scope="col">Zipcode</th>
                  <th scope="col">Latitude</th>
                  <th scope="col">Longitude</th>
                  <th scope="col">Timezone</th>
                  <th scope="col">ISP</th>
                  <th scope="col">ORG</th>
                  <th scope="col">AS</th>
                  <th scope="col">Query</th>
                  <th scope="col">Button Click</th>
                  <th scope="col">Last Visit</th>
                </tr>
              </thead> 
              <tbody>
                @php  
                    $i=1;
                    foreach($clicks as $click){
                @endphp
                <tr>
                  <th scope="row">{{$i}}</th>
                  <td>{{$click->referrer_page}}</td>
                  <td>{{$click->current_page}}</td>
                  <td>{{$click->broswer_detail}}</td>
                  <td>{{$click->screenResolution}}</td>
                  <td>{{$click->status}}</td>
                  <td>{{$click->country}}</td>
                  <td>{{$click->countryCode}}</td>
                  <td>{{$click->region}}</td>
                  <td>{{$click->regionName}}</td>
                  <td>{{$click->city}}</td>
                  <td>{{$click->zip}}</td>
                  <td>{{$click->lat}}</td>
                  <td>{{$click->lon}}</td>
                  <td>{{$click->timezone}}</td>
                  <td>{{$click->isp}}</td>
                  <td>{{$click->org}}</td>
                  <td>{{$click->api_as}}</td>
                  <td>{{$click->query}}</td>
                  <td>{{$click->text}}</td>
                  <td>{{date("F d, Y h:i A", strtotime($click->created_at))}}</td>
                </tr>
                @php
                  $i++;      
                  }
                @endphp
              </tbody>
            </table>
        </div>
    </div>
</div>
@section('script')
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.jqueryui.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.jqueryui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.5/js/dataTables.responsive.min.js"></script>
<script>
$(document).ready(function() {
    var table = $('#example').DataTable( {
        "columnDefs": [
           
            {
                "visible": false
            }
        ],
        buttons: [
            {
                extend: 'pdf'
            },
            {
                extend: 'csv'
            },
            {
                extend: 'excel'
            }         
        ],
        "lengthMenu": [ [10, 50, 100, 500, 1000], [10, 50, 100, 500, 1000] ],
        "iDisplayLength": 10, 
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select style="width:100px;"><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        },
        responsive: {
            details: {
                renderer: function ( api, rowIdx, columns ) {
                    var data = $.map( columns, function ( col, i ) {
                        return col.hidden ?
                            '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                                '<td>'+col.title+':'+'</td> '+
                                '<td>'+col.data+'</td>'+
                            '</tr>' :
                            '';
                    } ).join('');
 
                    return data ?
                        $('<table/>').append( data ) :
                        false;
                }
            }
        }
    } );
 
    table.buttons().container()
        .insertBefore( '#example_filter' );
} )
</script>
@endsection
@endsection